<template>
  <el-container>
    <div v-if="temp" @click="payMoney" class="paymoney">
      {{ timeOut }} 去支付<i class="el-icon-arrow-right"></i>
    </div>
    <el-header style="text-align: left; font-size: 26px">
      <el-page-header @back="goBack" content="秒杀产品详情"> </el-page-header>
    </el-header>

    <!-- 秒杀时间 -->
    <div
      style="
        font-size: 26px;
        text-align: center;
        background: rgb(245, 108, 108);
        border-radius: 15px;
      "
    >
      {{ count }}
    </div>
    <el-main>
      <ul style="list-style: none" class="infor">
        <li class="bg-red">
          <p style="text-decoration: line-through">商品原价</p>
          <span
            ><strong style="text-decoration: line-through">{{
              this.$store.state.spikeDetail.goodsPrice / 10000
            }}</strong
            >万元</span
          >
        </li>

        <li class="bg-yellow">
          <p>商品秒杀价</p>
          <span
            ><strong>{{
              this.$store.state.spikeDetail.seckillPrice / 10000
            }}</strong
            >万元</span
          >
        </li>
      </ul>
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template slot="label"> 产品年利率 </template>
          {{ this.$store.state.spikeDetail.aagr }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 投资周期 </template>
          {{ this.$store.state.spikeDetail.term }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 发行银行 </template>
          三湘银行
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 认购币种 </template>
          人名币
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 发行地区 </template>
          湖南
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品类型 </template>
          人民币理财
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 对象 </template>
          货币市场，其他
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 收益获取方式 </template>
          不保本
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 申购条件 </template>
          未知 </el-descriptions-item
        ><el-descriptions-item>
          <template slot="label"> 提前终止条件 </template>
          未知
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 收益率说明 </template>
          预期最高收益为{{ this.$store.state.spikeDetail.aagr }}%
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商品类型 </template>
          秒杀商品
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品描述 </template>
          {{ this.$store.state.spikeDetail.goodsDetail }}
        </el-descriptions-item>
      </el-descriptions>
      <div style="text-align: center; margin-top: 20px">
        <el-button
          type="danger"
          @click="Snapped"
          :disabled="isDisabled"
          style="height: 200px; width: 200px; font-size: 30px"
          circle
        >
          立即抢购
        </el-button>
        <p>库存量：{{ this.$store.state.spikeDetail.stockCount }}</p>
      </div>
      <!-- 抢购成功弹窗 -->
      <el-dialog
        title="恭喜！抢购成功"
        :visible.sync="successDialog"
        width="30%"
        :before-close="handleClose"
      >
        <span style="color: red">{{ timeOut }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="payMoney">去支付</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import { Message } from 'element-ui';

export default {
  data() {
    return {
      isDisabled: true,
      count: "", //倒计时
      seconds: 0, // 10天的秒数
      timer: null, //定时器名字
      successDialog: false, //抢购成功弹窗
      timeOut: "05:00:00", //支付倒计时
      seconds2: sessionStorage.getItem("timeOut"),
      timer2: null,
      temp: 0, //data
      tem: '' //path
    };
  },
  created() {
    this.getSpikeLists();
    this.getTimeStamp(); //获取系统时间戳
    this.Time(); //调用定时器
  },
  mounted() {
    
  },
  methods: {
    async Snapped() {
      //防止多次点击抢购button
      this.isDisabled = true; //禁用按钮
      var timer3 = setTimeout(() => {
        this.isDisabled = false;
      }, 5000);
      this.$store.commit("setTime", new Date().valueOf());
      this.seconds2 = new Date().valueOf();
      this.timer2 = setInterval(() => {
        this.seconds2 -= 1;
        this.countDown2();
      }, 100);

      await this.$http.get("/payment/seckill/path/" + this.$store.state.spikeDetail.id).then((res) => {
        this.tem = res.data; //获取路径
      })
      this.$http({
        method:"post",
        url:"/payment/orderSeckillgoods/" + this.tem + "/" + this.$store.state.spikeDetail.id
      }).then((respon) => {
        if (respon.code == 200) {
          this.successDialog = true; //抢购成功
          this.temp = respon.data;
          clearInterval(timer3);
        } else {
          Message.error(respon.data);
        }
      });
      // post(
      //   "api/payment/orderSeckillgoods/" + this.tem + "/" + this.$store.state.spikeDetail.id
      // ).then((respon) => {

      //   if (respon.code == 200) {
      //     this.successDialog = true; //抢购成功
      //     this.temp = respon.data;
      //     clearInterval(timer3);
      //   } else {
      //     Message.error(respon.data);
      //   }
      // });
    },
    countDown2() {
      //支付倒计时
      var distance = this.seconds2 + 300000 - new Date().valueOf();
      if (distance <= 0) {
        clearInterval(this.timer2);
        this.timeOut = "支付失败！";
        this.successDialog = false;  //关闭抢购成功弹出框
        this.temp = 0;
        return;
      }
      let m = Math.floor((distance / 1000 / 60) % 60);
      m = m < 10 ? "0" + m : m;
      let s = Math.floor((distance / 1000) % 60);
      s = s < 10 ? "0" + s : s;
      let ms = Math.floor(distance % 1000);
      ms = ms < 100 ? "0" + ms : ms;
      ms = ms < 10 ? "00" + ms : ms;

      this.timeOut = "请在" + m + ":" + s + ":" + ms + "内支付！！！";
    },
    payMoney() {
      this.$router.push({
        path: "/orderPage",
        query: {
          data: this.temp,
        },
      });
    },
    handleClose(done) {
      this.$confirm("确定放弃这么好的宝贝吗？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    timestampToTime(time) {
      //时间戳转换
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new Date(time);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let m = date.getMinutes();
      let s = date.getSeconds();
      MM = MM < 10 ? "0" + MM : MM;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      m = m < 10 ? "0" + m : m;
      s = s < 10 ? "0" + s : s;
      return y + "年" + MM + "月" + d + "日" + h + "时" + m + "分" + s + "秒";
    },
    getSpikeLists() {
      //获取秒杀商品详情
      const goodsId = this.$route.query.col;
      this.$http.get("/mall/seckillgoods/detail/" + goodsId).then((resp) => {
        if (resp.code == 200) {
          this.$store.commit("getSpikeDetail", resp.data);
          this.seconds =
            (resp.data.startDate - this.$store.state.timeStamp) / 1000;
        }
      });
    },
    getTimeStamp() {
      //获取服务器时间戳
      this.$http.get("/mall/timestamp").then((res) => {
        this.$store.commit("getTimeStamp", res.data);
      });
    },
    // 天 时 分 秒 格式化函数
    countDown() {
      //秒杀倒计时

      if (this.seconds <= 0) {
        clearInterval(this.timer);
        this.count = "秒杀已开始！";
        this.isDisabled = false;
        return;
      }
      let d = parseInt(this.seconds / (24 * 60 * 60));
      d = d < 10 ? "0" + d : d;
      let h = parseInt((this.seconds / (60 * 60)) % 24);
      h = h < 10 ? "0" + h : h;
      let m = parseInt((this.seconds / 60) % 60);
      m = m < 10 ? "0" + m : m;
      let s = parseInt(this.seconds % 60);
      s = s < 10 ? "0" + s : s;
      this.count = "秒杀倒计时：" + d + "天" + h + "时" + m + "分" + s + "秒";
    },
    //秒杀定时器
    Time() {
      this.timer = setInterval(() => {
        this.seconds -= 1;
        this.countDown();
      }, 1000);
    },
    goBack() {
      this.$router.push("/spikeMerchandise");
    },
  },
  beforeDestroy() {
    // 页面关闭（路由跳转）时清除定时器
    // clearInterval(this.timer);
    // this.timer = null;
  },
};
</script>

<style scoped>
.infor {
  height: 150px;
  padding-left: 20px;
}
.infor li {
  position: relative;
  float: left;
  width: 300px;
  height: 150px;
  border-radius: 5px;
  margin-left: 20px;
  text-align: center;
  color: #fff;
}
.infor li strong {
  font-size: 65px;
  font-weight: 500;
}
.infor li p {
  font-size: 20px;
}
.bg-red {
  background: #eea96b;
}

.bg-yellow {
  background: #ce3c28dc;
}

.margin-top {
  text-align: center;
}

.paymoney {
  text-align: right;
  height: 30px;
  color: rgb(64, 158, 255);
  border: 2px solid rgb(107, 185, 55);
  font-size: 20px;
  border-radius: 20px;
}
.paymoney:hover {
  background-color: rgb(107, 185, 55);
}
</style>